<template>
	<view class="content">
		<view class="inp">
			<view class="left"><text>活动标题</text></view>
			<input class="right" type="text" v-model="activityTitle" placeholder="输入活动标题" />
		</view>
		<view class="inp">
			<view class="left"><text>活动描述</text></view>
			<input class="right" type="text" v-model="activityDesc" placeholder="输入活动描述" />
		</view>
		<view class="inp">
			<view class="left"><text>开始时间</text></view>
			<ruiDatePicker fields="second" :value="startTime" @change="bindChange"></ruiDatePicker>
		</view>
		<view class="inp">
			<view class="left"><text>结束时间</text></view>
			<ruiDatePicker fields="second" :value="endTime" @change="endChange"></ruiDatePicker>
		</view>
		<view class="inp">
			<view class="left"><text>活动地址</text></view>
			<input class="right" type="text" v-model="activityAddress" placeholder="输入活动地址" />
		</view>
		<view class="inp">
			<view class="left"><text>参与人数</text></view>
			<input class="right" v-model="maxPeople" type="number" placeholder="参与人数" />
		</view>
		<view :class="btn" @tap="send">
			发布
		</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js";
	import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			ruiDatePicker
		},
		data() {
			return {
				activityTitle: '',
				activityDesc: '',
				activityAddress: '',
				endTime: '',
				startTime: '',
				maxPeople: 0
			}
		},
		computed: {
			...mapState(['user']),
			btn() {
				if (this.judge()) {
					return "btn";
				}
				return "btn dis"
			}
		},
		methods: {
			send() {
				if (this.judge()) {
					if (this.user.phone == null || this.user.phone.length == 0) {
						uni.showModal({
							title: '通知提醒',
							content: '你当前未绑定手机号,点确定绑定手机号',
							showCancel: true,
							cancelText: '取消',
							confirmText: '立即绑定',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: "../verificationcode/verificationcode"
									})
								} else {
									return;
								}
							}
						});
						return;
					}
					let start = new Date(this.startTime);
					let end = new Date(this.endTime);
					let now = new Date();
					if (start.getTime() < now.getTime()) {
						utils.errorToast("开始时间不能小于当前时间");
						return false;
					}
					if (end.getTime() < start.getTime()) {
						utils.errorToast("结束时间不能小于开始时间");
						return false;
					}
					if (parseFloat(this.maxPeople).toString() == "NaN") {
						utils.errorToast("人数只能为数字");
						return false;
					}
					utils.post("activity/addactivity", {
						activityTitle: this.activityTitle,
						activityDesc: this.activityDesc,
						activityAddress: this.activityAddress,
						endTime: this.endTime,
						startTime: this.startTime,
						maxPeople: this.maxPeople,
						userId: this.user.id
					}, function(data) {
						uni.navigateBack({
							delta: 1
						});
					})
				}
			},
			judge() {
				if (this.activityTitle.length == 0) {
					return false;
				}
				if (this.activityDesc.length == 0) {
					return false;
				}
				if (this.activityAddress.length == 0) {
					return false;
				}
				if(this.maxPeople<=0) {
					return false;
				}
				return true;
			},
			bindChange(value) {
				this.startTime = value;
			},
			endChange(value) {
				this.endTime = value;
			}
		},
		onLoad() {

		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.btn {
		width: 92%;
		margin-left: 4%;
		background-color: #EE3F4D;
		color: #ffffff;
		line-height: 100upx;
		height: 100upx;
		text-align: center;
		margin-top: 60upx;
		border-radius: 6upx;
		font-size: 30upx;
	}

	.inp {
		width: 92%;
		margin-left: 4%;
		height: 90upx;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		border-radius: 6upx;
		align-items: center;
		margin-top: 40upx;
	}

	.left {
		width: 180upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		font-size: 24upx;
		color: #999999;
		box-shadow: inset -1px 0px 1px -1px #dcdcdc;
	}

	.right {
		font-size: 28upx;
		flex: 1;
		margin-left: 30upx;
		margin-right: 20upx;
	}

	.dis {
		opacity: 0.3;
	}
</style>
